<template>
  <div class="parent">
    <div class="top">
    </div>
    <div class="main">
      <div class="aides" >
        <div class="dev-tree">
          <div style="background-color: #232e45;max-height: 400px;
            overflow-y: auto;
            padding: 10px; ">
            <el-tree
                style="background-color: #232e45 ; color: #cccccc;"
                :data="data"
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                node-key="id"
                default-expand-all>
              <span slot-scope="{ node, data }" class="custom-tree-node">
                  <span :class="data.onLine==0?'aaa':'bbb'">
                     <i  :class="data.model=='IP Camera'? 'el-icon-camera-solid' :'el-icon-s-platform'"></i>
                    {{ node.label }}
                  </span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="dev-controller" v-if="isController">
          <span style="color: #cccccc;font-size: 20px">设备通道号:{{this.devicesn}}</span>
<!--        预置位  -->
          <div>
            <span class="yu-ziti" style="padding: 10px;margin: 10px">预置位</span>
            <span>
              <el-select v-model="value" size="mini" style="width: 80px"  placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span class="yu-ziti" @click="setYuZhiWei"  style="padding: 10px;cursor: pointer; "
                  onmouseover="this.style.backgroundColor='#23a1ae';"
                  onmouseout="this.style.backgroundColor='';">设置</span>
            <span class="yu-ziti" @click="delYuZhiWei" style="padding: 10px;cursor: pointer;"
                  onmouseover="this.style.backgroundColor='#23a1ae';"
                  onmouseout="this.style.backgroundColor='';">清除</span>
            <span class="yu-ziti" @click="startYuZhiWei" style="padding: 10px;cursor: pointer;"
                  onmouseover="this.style.backgroundColor='#23a1ae';"
                  onmouseout="this.style.backgroundColor='';">调用</span>
          </div>
          <div style="display: flex; flex-direction: row; justify-content: space-between">
            <div>
<!--              <circle-buttons :devicesn="devicesn" style="margin: 20px"></circle-buttons>-->
              <circle-buttons :devicesn="devicesn" style="background-color:beige;margin-top: 10px;margin-left: 10px"></circle-buttons>
            </div>
            <div>

              <div style="display: flex; flex-direction: row; align-content: space-between; margin: 20px">
                <span @mousedown="devSmall" @mouseup="devStop"><el-button  class="direction-btn " icon="el-icon-minus" circle></el-button></span>
                <span class="yu-ziti" style="padding-top: 10px; margin: 0 20px"  >倍数调整</span>
                <span @mousedown="devBig" @mouseup="devStop"><el-button class="direction-btn " icon="el-icon-plus" circle></el-button></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="contr">
        <div class="single-screen">
          <LivePlayer :videoUrl="streamUrl" fluent autoplay live stretch timeout:20 :water-mark="water_mark"></LivePlayer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
import {controllerDevice, getDeviceList2, getPlayerPath,YZWController} from "@/api/controller.js"
import circleButtons from "@/components/CircleButtons.vue";
import SingleScreen from '@/components/SingleScreen.vue'
import QuadScreen from '@/components/QuadScreen.vue';
import NineScreen from '@/components/NineScreen.vue';
import FlvVideo from '@/components/FlvVideo.vue';
import VideoPlayer from '@/components/JessibucaVideo.vue';

import videojs from "video.js";

function   buildChildrenNod(arr) {
  if (arr != null) {
    let children = [];
    for (let childrenNodeElement of arr) {
      let childrenNode = ""
      if (childrenNodeElement.children != null) {
        let children = buildChildrenNod(childrenNodeElement.children);
        childrenNode = {
          "label": childrenNodeElement.name,
          "channelId": childrenNodeElement.channelId,
          "icon": "el-icon-camera-solid",
          "children":children
        }
      } else {
        childrenNode = {
          "label": childrenNodeElement.name,
          "devicesn": childrenNodeElement.deviceSn,
          "icon": "el-icon-s-platform",
        }
      }
      children.push(childrenNode);
    }
    return children;
  }
}
export default {
  name: "index",
  components:{
    circleButtons,
    VideoPlayer,
    SingleScreen,
    QuadScreen,
    NineScreen,
    FlvVideo,
    LivePlayer
  },
  data() {
    return {

      myPlayer:'',//实例初始值
      playVideo:{
        videoUrl: 'http://video.m3u8',// 视频地址
      },

      water_mark:'燕山石化',
      // options: [],
      value: '1',
      currentPage1:2,
      devicesn:"",
      streamUrl:"",
      aaa:'aaa',
      bbb:'bbb',
      flvPlayer:null,
      isController:false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        channelId:"channelId",
        id:"deviceId",
        model:"model",
        onLine:"onLine"
      },
    }
  },
  created() {
    this.getTree();
    for(let i =1;i<=10;i++){
      this.options.push({
        "value":i,
        "label":i
      })
    }
    this.initVideoSource()//调用方法生成实例挂载

  },



  methods:{


    initVideoSource() {
      this.myPlayer = videojs('my-video', {
        controls: true, // 是否显示控制条
        preload: 'auto',
        // fluid: true, // 自适应宽高
        width:'750',
        height:'350',
        language: 'zh-CN', // 设置语言
        muted: false, // 是否静音
        inactivityTimeout: false,
        autoplay:true,
        loop:false,
        // 设置控制条组件
        controlBar: { // 设置控制条组件
          //  设置控制条里面组件的相关属性及显示与否
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          volumePanel: {
            inline: false,
          },
          pictureInPictureToggle: false,
        },
        sources: [
          {
            src: this.playVideo.videoUrl,
            type: 'application/x-mpegURL',//主要数据类型必须是这种格式
          },
        ],
        userActions: {
          seek: false,
        },
      })
    },

    getTree(){
      getDeviceList2().then(res=>{
        this.data=res.data.data
        console.log(this.data)
      })
    },
    handleNodeClick(data) {
      if(data.model==="IP Camera"||data.model==="dahua"){
        this.isController=true;
        this.devicesn=data.channelId;
        getPlayerPath(this.devicesn).then(res=>{
          let steeamUrl = res.data.msg;
          console.log("播放的地址是：" + steeamUrl)
          this.streamUrl = steeamUrl
        })
      }
    },
    devBig(){
      controllerDevice("big",this.devicesn).then(res=>{
        console.log(res)
      })
    },
    devSmall(){
      controllerDevice("small",this.devicesn).then(res=>{
        console.log(res)
      })
    },
    devStop(){
      controllerDevice("stop",this.devicesn).then(res=>{
        console.log(res)
      })
    },
    setYuZhiWei(){
      console.log(this.devicesn);
      console.log(this.value);
      YZWController("add",this.devicesn,this.value).then(res=>{
        console.log(res)
      })
    },
    delYuZhiWei(){
      YZWController("del",this.devicesn,this.value).then(res=>{
        console.log(res)
      })
    },
    startYuZhiWei(){
      YZWController("exec",this.devicesn,this.value).then(res=>{
        console.log(res)
      })
    },
  }
}
</script>

<style scoped>
.aaa{
  color: #cccccc;

}
.bbb{
  color: #999999;
}
.direction-btn {
  width: 40px;
  height: 40px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px;
  padding-right: 8px;
  font-size: 20px
}
.parent{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #232e45;
  }
  .top{
    height: 50px;
  }
  .main{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
  }
  .aides{
    height: 100%;
    width: 600px;
    display: flex;
    flex-direction: column;

  }
  .dev-tree{
    flex-grow: 1;
    width: 100%;
    border:  1px solid  darkcyan ;
    margin: 10px;
    display: flex;
    flex-direction: column;
  }
  .dev-controller{
    height: 300px;
    width: 100%;
    margin: 10px;
    border:  1px solid  darkcyan ;
  }
  .contr{
    width: 100%;
    margin: 10px;
    border:  1px solid  darkcyan ;
  }
  .yu-ziti{
    font-family: 微软雅黑;
    font-size: 15px;
    color: azure;
  }

</style>
